<template>
  <el-card body-style="height:auto" class="box-card">
    <div slot="header" class="clearfix">
      <span style="float: left">Verb(动词) 注册表</span>
      <div style="padding: 0;float: right ">
        <el-input
          style="width: 60% ;"
          placeholder="请输入内容"
          prefix-icon="el-icon-search"

          v-model="verbName">
        </el-input>
        <el-button type="primary" icon="el-icon-search" v-on:click="getVerb" style="margin-left: 2%">搜索</el-button>
      </div>
      <el-button style="float: right;" type="primary" v-on:click="addVerb(null)">注册verb</el-button>
    </div>
    <div class="clearfix">
      <el-table
        :data="verbData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="verbName"
          label="verbName"
          align="center"
          min-width=20%>
        </el-table-column>
        <el-table-column
          prop="verbId"
          label="verbId"
          min-width=50%>
        </el-table-column>
        <el-table-column
          label="display"
          min-width=50%>
          <template slot-scope="scope">
            <json-viewer :value="scope.row.displayJson"></json-viewer>
          </template>
        </el-table-column>
        <el-table-column
          prop="type"
          label="type"
          min-width=50%>
        </el-table-column>
        <el-table-column prop="" label="">
          <template slot-scope="scope">
            <el-button type="primary" round v-on:click="addVerb(scope.row.verbId)">修改</el-button>
            <el-button type="danger" round v-on:click="delVerb(scope.row.verbId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next"
        :total="this.totalElements">
      </el-pagination>
    </div>
  </el-card>
</template>
<script>
  import VerbRegistryForm from "../../message/registry/VerbRegistryForm"

  export default {
    mounted: function () {
      this.getVerb();
      this.recordBehavioral()
    },
    data() {
      return {
        verbData: [{
          displayJson: {}
        }],
        currentPage: 1,
        pageSize: 10,
        totalElements: 0,
        verbName: ''
      }
    },
    components: {
      "v-form": VerbRegistryForm
    },
    methods: {
      handleSizeChange(val) {
        this.pageSize = val;
        this.currentPage = 0
        this.getVerb()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.getVerb()
      },
      getVerb() {
        this.$axios.get("/verb", {
          params: {
            verbName: this.verbName,
            currentPage: this.currentPage - 1,
            pageSize: this.pageSize
          }
        }).then(successResponse => {

          this.verbData = successResponse.data.content
          this.pageSize = successResponse.data.pageable.pageSize
          this.totalElements = successResponse.data.totalElements
        }).catch(failResponse => {
        })
      },
      addVerb(verbId) {
        this.$msgbox({
          message: <v-form ref="VerbRegistryForm"></v-form>,
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          data: verbId,
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 30);
              }, 300);
            } else {
              done();
            }
          }
        }).then(action => {
          this.$refs.VerbRegistryForm.submitForm()
          location.reload()
        }).catch(msg => {
          if (msg == "cancel") {
            this.$refs.VerbRegistryForm.resetForm()
            location.reload()
            this.$message.info("已取消")
          } else {
            this.$message.error(msg)
          }
        });
      },
      delVerb(verbId){
        let url="/verb/"
        this.$axios.delete(url,{params:{
            verbId:verbId
          }}).then(successResponse => {
          location.reload()
        }).catch(failResponse => {
        })
      },
      recordBehavioral(){
        this.$axios
          .post('/behavior/record', {
            appToken: "03557c489f1be084dd41fab9b008f902",
            verb:{
              id:"http://192.168.31.163:8090/verb/see"
            },
            object : {
              objectType:"Activity",
              id:"297ee3d078de24c90178dfdc71c20001"
            }
          })
          .then(success=>{
            this.$message({
              type: 'info',
              message: "行为数据记录成功！"
            });
          }).catch(fail=>{this.$message.error("行为数据记录失败")})
      }

    }
  }
</script>
<style>
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
    height: auto;
  }

  .block {

  }
</style>
